<template>
	<view class="content">
		<scroll-view class="itembox" scroll-y="true">
			<view v-for="(item, index) in lists" :key="index" class="topic-art">
				<view class="topic">第{{ index + 1 }}题</view>
				<view class="completion">
					<text>|</text>
					{{ item.question_type_name }}
				</view>
				<view class="long-line"></view>
				<view class="first-title-content"><rich-text :nodes="item.question_title"></rich-text></view>
				<view class="analysis_text" v-if="item.is_one_choice == 2 || item.is_many_choice == 2" v-for="(val, id) in item.answer_list" :key="id">
					<view>{{ val.lettertext + '、' }}</view>
					<rich-text :nodes="val.answer"></rich-text>
				</view>
				<view class="container-flex-row answer2" v-if="item.answer">
					<view style="flex: none;">正确答案：</view>
					<block>
						<view><rich-text :nodes="item.answer"></rich-text></view>
					</block>
				</view>
				<view class="container-flex-row first-title-content answer1" v-if="item.answer">
					<view style="flex: none;">学生答案：</view>
					<!-- 定制填空题的答案放在第二数组，因此需要判断要确保有这个answer_list -->
					<view v-if="item.question_typeid == 11 && item.myanswer">
						<image class="yulanImg" :src="'data:image/jpeg;base64,' + item.myanswer" :style="{ background: 'url(' + item.question_photo + ') no-repeat' }"></image>
					</view>
					<view v-else-if="item.answer_img_list">
						<view class="answerimage">
							<view
								@click="previewImage(imgitem, item.answer_img_list)"
								class="right_img"
								v-for="(imgitem, imgindex) in item.answer_img_list"
								:key="imgindex"
								:style="{ backgroundImage: 'url(' + imgitem + ')' }"
							></view>
						</view>
					</view>
					<view v-else>{{ item.myanswer == '' ? '没答题' : item.myanswer }}</view>
				</view>

				<view class="title-flex">
					<text></text>
					<view class="first-title">题目解析</view>
				</view>
				<view class="first-title-content analysis"><rich-text :nodes="item.question_analysis"></rich-text></view>
				<!-- 		<view class="title-flex">
					<text></text>
					<view class="first-title">知识点</view>
				</view>
				<view class="first-title-content analysis" v-if="item.section_data.section_name">{{item.section_data.f_section_name+''+item.section_data.section_name}}</view>
				<view class="first-title-content analysis" v-else>无</view> -->
				<!-- <view class="grey-bg"></view> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
import util from '../../common/util.js';
export default {
	data() {
		return {
			lists: [],
			class_log_id: '',
			is_exam_type: 1,
			index: '',
			student_id: '',
			pagetype:''
		};
	},
	onLoad(e) {
		this.class_log_id = e.class_log_id;
		this.is_exam_type = e.is_exam_type;
		this.student_id = e.student_id;
		this.index = e.index;
		this.pagetype=e.pagetype;
		var data = {
			class_log_id: this.class_log_id,
			is_out_html: 2,
			allowable_tags: '<img>',
			student_id: this.student_id
		};
		var url = '';

		//作业错误解析
		if (this.is_exam_type == 1 && this.pagetype == 'error') {
			url = 'user/Grade.Stuhomework/homeworkErrorAnalysis';
		}
		//作业全部解析
		if (this.is_exam_type == 1 && this.pagetype == 'correct') {
			url = 'user/Grade.Stuhomework/homeworkAnalysis';
		}
		//测验错误解析
		if (this.is_exam_type == 2 && this.pagetype == 'error') {
			url = 'user/Grade.Stuexam/ExamErrorAnalysis';
		}
		//测验全部解析
		if (this.is_exam_type == 2 && pagetype == 'correct') {
			url = 'user/Grade.Stuexam/ExamAnalysis';
		}
		this.$zapi.apiPost(url, data).then(res => {
			if (res.data.code == 200) {
				var data = res.data.data.question_lists[this.index].sub_question_list;
				util.latex_reques(data, 'question_title'); //解析 试题标题 latex 公式转换
				util.latex_reques(data, 'question_analysis'); //解析 试题解析 latex 公式转换
				util.latex_answer(data, 'answer_list'); //解析答案选项 latex 公式转换
				this.lists = util.getAnalysis(data, 'exam_answer_log');
				this.$forceUpdate();
			} else {
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
			}
		});
	},
	methods: {
		previewImage: function(url, urls) {
			uni.previewImage({
				current: url,
				urls: urls
			});
		}
	}
};
</script>

<style lang="stylus">
html
	font-size 26upx
.img
	display block
	max-width 90%
	margin auto
.content
	position absolute
	width 100%
	height 100%
	background-color #FAFAFA
.itembox
	height 100%
	background-color #FAFAFA
.topic-art
	background-color #FFFFFF
	margin-bottom 10upx
	padding-bottom 20upx
.topic-art:last-child
	margin-bottom 0
	// padding-bottom: 70%;
.completion
	text-align left
	color #999999
	font-size 36upx
	display inline-block
.completion text
	margin-right 10upx
.long-line
	width 750upx
	border-top 1upx solid #e5e5e5
.long-line2
	width 710upx
	border-top 1upx solid #e5e5e5
	margin 10upx auto
.title-flex
	width 750upx
	height 52upx
	display flex
	justify-content flex-start
	align-items center
	margin-top 20upx
.title-flex text
	width 36upx
	height 36upx
	background-color #00D5A2
	border-radius 0px 10px 10px 0px
	margin-right 16upx
.title-bg
	width 142upx
	height 52upx
.first-title
	color #333333
	font-size 36upx
	font-weight bold
.topic
	color #FF9900
	font-size 36upx
	font-weight bold
	margin 20upx 10upx 30upx 30upx
	display inline-block
.small-title
	font-size 24upx
	margin-top 2upx
.blue
	box-shadow -0.1rem 0.1rem 0.2rem rgba(0, 173, 255, 0.4)
.orange
	box-shadow -0.1rem 0.1rem 0.2rem rgba(255, 144, 0, 0.4)
.red
	box-shadow -0.1rem 0.1rem 0.2rem rgba(241, 0, 0, 0.4)
.lanse
	box-shadow -0.1rem 0.1rem 0.2rem rgba(0, 92, 220, 0.4)
.favorite
	color #666666
	/* display: inline-block; */
	position absolute
	right 30upx
	line-height 18upx
	display flex
	justify-content space-between
	align-items center
	margin-top -70upx
.favorite i
	font-size 45upx
	text-align center
	/* margin-right: 10upx; */
.container-flex-row
	display flex
	flex-direction row
.item1
	color #666666
	align-items center
	margin-bottom 10upx
.first-title-content
	font-size 36upx
	color #333333
	margin-left 25upx
.analysis_text
	font-size 32upx
	color #333333
	margin-left 25upx
	display flex
	flex-direction row
.space
	margin-top 14upx
.answer1
	color #666666
	margin-top 14upx
.answer2
	color #00D5A2
	margin-left 25upx
.answer1 view, .answer2 view
	font-size 34upx
.analysis
	color #666666
	font-size 34uox
	margin 14upx 25upx
	line-height 1.5
.knowledge
	color #666666
	margin-bottom 10upx
.know2
	margin-left 52upx
.grey-bg
	border-bottom 10upx solid #FAFAFA
.dati-item
	margin-left 20upx
/* 底部 */
.bottom
	position fixed
	bottom 0
	width 100%
.footer
	height 48upx
	width 100%
	background #F7F7F7
	border-radius 20px 20px 0px 0px
.footer image
	width 68upx
	height 16upx
	margin-left 341upx
	margin-top 16upx
/* 弹窗 */
.problue_result
	width 710upx
	padding 40upx 20upx 60upx
	background #FFFFFF
.prores_type_cont
	height auto
.prores_type_title
	text-align center
.result_list
	display flex
	flex-wrap wrap
.yulanImg
	width 550upx
	background-size 100% 100% !important
.answer_content
	width 75%
	word-break break-all
	font-size 32upx
.answerimage
	width 550upx
	display flex
	justify-content flex-start
	flex-wrap wrap
.right_img
	position relative
	width 25%
	height 0
	overflow hidden
	margin 0
	margin-top 15upx
	margin-right 15upx
	padding-bottom 150upx /* 关键就在这里 */
	background-position center
	background-repeat no-repeat
	background-size cover
.checkSub
	font-size 34upx
	color #00D5A2
	margin 40upx 30upx 0
	padding-bottom 20upx
	text-align right
	font-weight bold
</style>
